<template>
  <div id="app">
     <h1>vue在线翻译</h1>
     <h5>简单 / 易用 / Developer:tingting.wang</h5>
    <translateForm v-on:needToTranslate="translateText"></translateForm>
    <translateOutput v-text="translateResult"></translateOutput>
  </div>
</template>

<script>

  import TranslateForm from './components/TranslateForm'
  import TranslateOutput from './components/TranslateOutput'

export default {
  name: 'app',
  data:function () {
    return{
      translateResult:""
    }
  },
  components: {
    TranslateOutput,
    TranslateForm
  },
  methods:{
    translateText:function (text,language) {
       this.$http.get("https://translate.yandex.net/api/v1.5/tr.json/translate?&key=trnsl.1.1.20170913T034357Z.c824a9242430fb2e.482fd1f7e0e031d0546c724b9e89492b6d904df7" +
         "&lang="+language+"&text="+text)
         .then((response)=>{
           this.translateResult= response.body.text[0]
         })


    }
  }

}
</script>

<style>
  #app{
    text-align: center;
    color: #222;
    font-family:"微软雅黑";
  }
</style>
